<template>
	<view>
		<view class="user-header">
			<u-avatar :src="userPic" size="large" />
			<view class="user-name">{{userNickName}}</view>
			<view class="user-phone">{{userPhone}}</view>
		</view>
		<view class="section-title">我的功能</view>
		<view class="mine-list" v-if="role === 'user'">
			<view class="mine-item" @click="toResume">我的简历</view>
			<view class="mine-item" @click="toApply">申请记录</view>
			<view class="mine-item" @click="toCollect">收藏职位</view>
			<view class="mine-item" @click="toSetting">设置</view>
		</view>
		<view class="mine-list" v-else>
		      <view class="mine-item" @click="toVacancy">发布的岗位</view>
		      <view class="mine-item" @click="toReceivedResume">收到的简历</view>
		      <view class="mine-item" @click="toSetting">企业设置</view>
		    </view>
	</view>
</template>

<script>
import { getCount } from '../../utils/api/modules/message';
import Upload from '../common/upload.vue';

	export default {
		components: {
			Upload
		},
		data() {
			return {
				userPic: "",
				userNickName: "",
				userBio: "",
				userCredit: "",
				userPhone:"",
				role: uni.getStorageSync('user').role,
				list1: [
					"/static/swiper/banner1.jpg",
					"/static/swiper/banner2.jpg",
					"/static/swiper/banner3.jpg",
					"/static/swiper/banner4.jpg",
					"/static/swiper/banner5.jpg",
				],
				messageCount:""
			}
		},
		methods: {
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					confirmText: '退出',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了"退出"
							this.$store.commit('CLEAR_TOKEN');
							uni.showToast({
								title: '退出成功',
								icon: 'success',
								duration: 1500
							});
						}
					}
				});
			},
			toResume() {
			    uni.navigateTo({ url: `/pages/mine/personal?id=${uni.getStorageSync('user').id}` })
			},
			toApply() {
			    uni.navigateTo({ url: '/pages/mine/apply-list' })
			},
			toCollect() {
			    uni.navigateTo({ url: '/pages/mine/collect-list' })
			},
			toSetting() {
			    uni.navigateTo({ url: '/pages/mine/setting' })
			},
			toVacancy() {
			    uni.navigateTo({ url: '/pages/mine/posted-jobs' })
			},
			toReceivedResume() {
			    uni.navigateTo({ url: '/pages/mine/received-resumes' })
			},
		},
		onLoad() {
			this.userPic = uni.getStorageSync('user').pic;
			this.userNickName = uni.getStorageSync('user').nickName;
			this.userBio = uni.getStorageSync('user').bio;
			this.userCredit = uni.getStorageSync('user').credit;
			this.userPhone = uni.getStorageSync('user').phone;
			getCount({userId:uni.getStorageSync('user').id})
			.then(res=>{
				this.messageCount=res.data
			})
		}
	}
</script>

<style>
	/* 统一样式 */
	.grid-item {
		padding: 16rpx;
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;
		/* 圆角 */
		background-color: #ffffff;
		/* 背景色 */
		border: 5rpx solid #f0f0f0;
		/* 边框 */
		text-align: center;
		/* 文字居中 */
	}

	.grid-value {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		/* 数字颜色 */
	}

	.grid-label {
		font-size: 36rpx;
		color: #666;
		/* 标签颜色 */
	}

	.user-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 32rpx 0 12rpx 0;
	}
	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 4rpx;
	}
	.user-phone {
		font-size: 24rpx;
		color: #888;
	}
	.section-title {
		margin: 32rpx 20rpx 12rpx 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	.mine-list {
		padding: 0 20rpx;
	}
	.mine-item {
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx #f0f1f2;
		margin-bottom: 16rpx;
		padding: 30rpx;
		font-size: 28rpx;
		color: #2d8cf0;
		font-weight: bold;
	}
</style>